<template>
  <div class="pscenter">
    <index-header></index-header>
    <div class="container-fiuld py-4">
      <div class="row justify-content-center">
        <div class="col-lg-2 _l">
          <div class="row">
            <div class="cart _a col-lg-12 bg-white p-3">
              <div class="cart-body text-center">
                <div class="cart-title mb-2">
                  <img :src="avatar" class="rounded-circle" alt="" />
                </div>
                <div class="cart-text text-12">
                  <p class="font-weight-bold">yyyy</p>
                  <p class="color-h mb-4">设计爱好者</p>
                  <a
                    class="btn btn-warning btn-sm mr-2 mb-2 d-block px-4"
                    role="button"
                    >开始创作</a
                  >
                  <a
                    class="sendw btn btn-default btn-outline-secondary d-block btn-sm px-4 text-dark mr-2"
                    role="button"
                    >帮你的创作变现</a
                  >
                </div>
              </div>
            </div>
          </div>
          <div class="row text-12 gzz">
            <div class="col-lg-12 p-0 mt-3">
              <div class="card border-0 _b">
                <ul class="list-group list-group-flush">
                  <li class="list-group-item _bactive">我的关注</li>
                  <li class="list-group-item">我的创作</li>
                  <li class="list-group-item">我的收藏</li>
                  <li class="list-group-item">资料与账号</li>
                </ul>
              </div>
            </div>
          </div>
        </div>
        <div class="col-lg-8 p-0">
          <div class="row">
            <nav
              class="navbar ml-2 py-1 col-lg-11 navbar-expand-lg navbar-light bg-white"
            >
              <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav">
                  <li class="nav-item" :class="{ active: curr == 0 }">
                    <a class="nav-link" @click="curr = 0">动态 </a>
                  </li>
                  <li class="nav-item" :class="{ active: curr == 1 }">
                    <a class="nav-link" @click="curr = 1">关注的人</a>
                  </li>
                  <li class="nav-item" :class="{ active: curr == 2 }">
                    <a class="nav-link" @click="curr = 2">粉丝</a>
                  </li>
                </ul>
              </div>
            </nav>
          </div>
          <!-- 0 -->
          <div class="row" v-show="curr == 0">
            <div class="col-lg-12 px-0 py-2 d-flex flex-wrap">
              <thumb
                :item="item"
                :key="index"
                v-for="(item, index) in dongtai"
              ></thumb>
            </div>
            <div class="kong col-lg-12 px-0 py-2" v-if="dongtai.length == 0">
              <img src="~@/assets/Index/img/null-page.png" alt="" />
            </div>
          </div>
          <!-- 1 -->
          <div class="row" v-show="curr == 1">
            <div class="col-lg-12 px-0 py-2 d-flex flex-wrap">
              <attention
                @del="refresh($event, item.id)"
                v-for="(item, index) in likeList"
                :ref="`like${item.id}`"
                :key="index + 'a'"
                :item="item"
              ></attention>
            </div>
            <div class="kong col-lg-12 px-0 py-2" v-if="likeList.length == 0">
              <img src="~@/assets/Index/img/null-page.png" alt="" />
            </div>
          </div>
          <!-- 2 粉丝-->
          <div class="row" v-show="curr == 2">
            <div class="col-lg-12 px-0 py-2 d-flex flex-wrap">
              <attention
                @del="fensidel($event, item.id)"
                @add="fensiadd($event, item.id)"
                :ref="`fensi${item.id}`"
                v-for="item in fensiList"
                :key="item.id + 'b'"
                :item="item"
              ></attention>
            </div>
            <div class="kong col-lg-12 px-0 py-2" v-if="fensiList.length == 0">
              <img src="~@/assets/Index/img/null-page.png" alt="" />
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import indexHeader from "@/components/indexCom/index-header.vue";
import attention from "@/components/personalCom/attention.vue";
import thumb from "@/components/personalCom/thumb.vue";

export default {
  data() {
    return {
      // 当前列
      curr: 0,

      // 我的关注
      likeList: [],
      fensiList: [],
      // 动态
      dongtai: [],
      likeId: [],
      // 頭像
      avatar:localStorage.getItem("avatar")
    };
  },
  async mounted() {
    let { data: res } = await this.axios.get("/attention", {
      params: { userId: 70 },
    });
    this.likeList = res.results;
    let { data: fensi } = await this.axios.get("/fensi", {
      params: { likeId: 70 },
    });
    this.fensiList = fensi.results;
    this.likeId = this.likeList.map((v) => {
      return v.id;
    });
    [].forEach.call(this.fensiList, (v) => {
      this.likeId.indexOf(v.id) !== -1
        ? (v.gzstate = false)
        : (v.gzstate = true);
    });
    this.getdongtai(this.likeId);
  },
  components: {
    indexHeader,
    thumb,
    attention,
  },
  methods: {
    async aa() {
      let { data: res } = await this.axios.get("/attention", {
        params: { userId: 70 },
      });
      this.likeList = res.results;
      let { data: fensi } = await this.axios.get("/fensi", {
        params: { likeId: 70 },
      });
      this.fensiList = fensi.results;
      this.likeId = this.likeList.map((v) => {
        return v.id;
      });
      [].forEach.call(this.fensiList, (v) => {
        this.likeId.indexOf(v.id) !== -1
          ? (v.gzstate = false)
          : (v.gzstate = true);
      });
      this.getdongtai(this.likeId);
    },
    // 动态
    async getdongtai(likeid) {
      let { data: dongtai } = await this.axios.post("/dongtai", {
        likeId: likeid,
      });
      this.dongtai = dongtai.results;
    },
  
    async fensidel(e, a) {
      let { data: res } = await this.axios.post("/delLike", e);
      this.aa();
    },
    async fensiadd(e, a) {
      let { data: res } = await this.axios.post("/addLike", e);
      this.aa();
    },
    async refresh(e, a) {
      let { data: res } = await this.axios.post("/delLike", e);
      this.aa();
    },
  },
};
</script>

<style lang="less">
.pscenter {
  padding-top: 60px;
  background-color: #f4f4f4;
  .kong {
    height: 400px;
    display: flex;
    justify-content: center;
    align-items: center;
    img {
      width: 200px;
      height: 200px;
    }
  }
  ._l {
    ._a {
      border-radius: 5px;
      img {
        width: 100px;
        height: 100px;
      }
    }
    ._b {
      li:hover {
        background-color: #ffc107 !important;
      }
      ._bactive {
        border-left: 2px solid #ffc107;
      }
    }
  }
}
.pscenter {
  .text-12 {
    font-size: 12px;
  }
  .bg-white {
    background-color: #fff;
  }
  .color-h {
    color: #bbbbbb;
  }
  .activeA {
    border-bottom: 2px solid #000 !important;
    color: #000;
  }
  .row {
    margin: 0px;
  }
  .gzz {
    margin-bottom: 95px;
  }
}
</style>